<template>
  <div id="app">
    <TopTitle>
    </TopTitle>
    <div :class="{login:true,hide:hideLogin}">
      <a href="https://github.com/login/oauth/authorize?client_id=d327e486430e4b05f07b&scope=gist,user">使用github帐号登录</a>
    </div>
    <div :class="{load:true,hide:hideLoad}">内容正在加载中</div>
    <router-view/>
  </div>
</template>

<script>
  import http from "axios"
  import queryString from "query-string"
  import bus from "./bus"
  import TopTitle from '@/components/TopTitle'

  export default {
    name: 'App',
    components:{TopTitle},
    data() {
      return {
        token: "",
        query: {}
      }
    },
    computed:{
      hideLogin(){
        return this.token !== "" || typeof  this.query.code !== "undefined"
      },
      hideLoad(){
        return this.token !== "" || typeof  this.query.code === "undefined"
      }
    },
    mounted() {
      if(localStorage.getItem("token") === null){
        this.token = ""
      } else {
        this.token =localStorage.getItem("token");
        this.$router.push("issues");
      }
      this.query = queryString.parse(location.search);
      if(typeof this.query.code !== "undefined"){
        http.get("https://joyfunphp.herokuapp.com/github/access/",{
          params: {
            client_id: "d327e486430e4b05f07b",
            code: this.query.code
          }
        }).then((r)=>{
          console.log(r);
          if(r.data.access_token){
            this.token = r.data.access_token;
            localStorage.setItem("token",this.token);
            this.$router.push("issues");
          } else {
            console.log("code过期");
            this.$router.push("/");
          }
        }).catch();
      } else {

      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  .hide {
    display: none;
  }
  .comWidth{
    width:900px;
    margin: 0 auto;
  }
  .fl{
    float: left;
  }
  .clear:after{
    content:"";
    display: block;
    height: 0;
    overflow: hidden;
  }
</style>
